<script setup lang="ts">
import {PlayStatus, useAudioPlayerStore} from "@/stores"
import  type {PropType} from "vue"

const audioPlay = useAudioPlayerStore()
const props = defineProps({
  song: {
    required: true,
    type: Object as PropType<song_info>
  },
  played: {
    required: true,
    type: Boolean
  },
  themeDarkStyle: {
    required: false,
    default: false,
    type: Boolean
  }
})

const handelPlay = () => {
  //如果是暂停状态，且当前选中歌曲等于正在播放的歌曲，继续播放
  //如果不是暂停播放状态，设置从头播放

  //如果歌曲不相同，设置播放歌曲，然后播放
  //如果在当前播放列表中，不其他操作，如果未在播放列表中，则添加到播放列表，如需切换播放列表替换全部音乐，需点击播放列表的播放全部按钮，这里不再实现

  if(audioPlay.playingSong)
  {
    if(audioPlay.playingSong.id === props.song.id ) {
      if(audioPlay.status !== PlayStatus.pause)
      {
        audioPlay.setPlayingTime(0)
      }
      audioPlay.play()
    }
    else{
      //设置新歌曲播放及播放列表维护
      audioPlay.setPlayingSong(props.song,true)
    }
  }



}

const handelPause = () => {
  //暂停
  audioPlay.pause()
}


</script>

<template>
  <div class="img_pause" v-if="played" @click="handelPause">

  </div>
  <div class="img_play" v-else @click="handelPlay">

  </div>

</template>

<style lang="scss" scoped>
.img_play{
  background: url(@/assets/qqimgs/mod_icon_light.svg) -24px 0 ;
  height: 15px;
  width: 12px;

  &:hover{
    background: url(@/assets/qqimgs/mod_icon_light.svg) -424px 0 ;
    cursor: pointer;
  }
}

.img_pause{
  background: url(@/assets/qqimgs/mod_icon_light.svg) -25px -20px;
  height: 15px;
  width: 12px;

  &:hover{
    background: url(@/assets/qqimgs/mod_icon_light.svg) -425px -20px;
    cursor: pointer;
  }
}
</style>